Skip to content

Fix feedback dialog focus ring clipping - #394

Merged
cooper (czxtm) merged 5 commits into
developfrom
fix/report-issue-focus-ring
Jul 4, 2026
Merged

Fix feedback dialog focus ring clipping#394
cooper (czxtm) merged 5 commits into
developfrom
fix/report-issue-focus-ring

Conversation

@fkb032

Copy link
Copy Markdown
Contributor

Summary

  • Fixes clipped focus-ring paint in the Report Issue dialog by adding scroll-container padding around the main form body.
  • Applies the same focus-ring buffer to the nested “Share with the team” checkbox list.
  • Adds a render-based regression test that verifies the actual dialog scroll containers include focus-ring buffer classes.

Original problem screenshot: attached in the first PR comment.

Test Plan

  • git fetch origin develop && git rev-list --left-right --count HEAD...origin/develop -> 1 0 after commit, meaning this branch is one commit ahead of latest origin/develop and not behind.
  • bun run test:unit src/components/widget/feedback/feedback-dialog.test.tsx
  • bun run check -> 0 errors, existing 131 warnings
  • bun -F native build
  • Computer Use: opened the rebuilt branch app, opened Report Issue, focused the textarea, tabbed to Current app state, and verified focus rings have left/top breathing room.
  • $claude-review: one outer claude-fable-5 / xhigh review call; valid findings addressed before PR creation.

Manual QA instructions:

  1. Run the native app from this branch.
  2. Click Report Issue.
  3. Confirm the textarea focus outline is fully visible on all sides.
  4. Press Tab until Current app state is focused under Share with the team.
  5. Confirm that checkbox focus ring is fully visible and not clipped on the left/top edges.

Docs

  • No docs update needed

@github-actions

github-actions Bot commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

🎨 Storybook preview

Open Storybook preview

Updated for cf4e1fc


❌ Failed snapshots (2)

These stories' HTML snapshots changed. Update snapshots ↗ to regenerate baselines and open a PR:

Settings/AutoConfigField › Controls

Settings/AutoConfigField › Controls

Settings/AutoTuningSection › Evolution Settings

Settings/AutoTuningSection › Evolution Settings

@github-actions

github-actions Bot commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

📋 PR Overview

Lines changed 43 (+41 / -2)
Files 1 added, 1 modified, 0 deleted
Draft / WIP no
Has Test Plan yes
No Test Plan Needed no
New UI components no
New Storybook stories no
New Rust modules no
New TS source files no
New tests yes (1)
package.json touched no
Cargo.toml touched no
Infra / CI touched no

🔬 Coverage

Report Lines Statements Functions Branches
apps/native/coverage/coverage-summary.json 27.8% 27.8% 25.8% 20.9%

Generated by 🚫 dangerJS against cf4e1fc

@fkb032

Copy link
Copy Markdown
Contributor Author

Original problem screenshot:

original-focus-ring-clipped

@linear-code

linear-code Bot commented Jun 19, 2026

Copy link
Copy Markdown

ENG-569

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested it and it works, yay!

However:

  • Storybooks seem broken
  • A couple of small improvements could be done in the code

Comment on lines +55 to +57
const FEEDBACK_DIALOG_BODY_CLASS = "space-y-6 flex-1 overflow-y-auto pl-1 py-1 pr-3";
const FEEDBACK_SHARE_OPTIONS_CLASS =
"space-y-2 max-h-[28vh] overflow-y-auto pl-1 py-1 pr-2";

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extracting these vars out seems unnecessary, it doesn't hurt though.

Comment on lines +19 to +35
describe("FeedbackDialog focus ring buffers", () => {
it("keeps focus-ring paint inside scrollable dialog containers", async () => {
useWidgetStore.getState().openFeedback(FeedbackType.Issue);

render(<FeedbackDialog />);

const textarea = await screen.findByLabelText("DESCRIBE WHAT HAPPENED");
const dialogBody = textarea.closest(".overflow-y-auto");

expect(dialogBody).toHaveClass("pl-1", "py-1", "pr-3");

const shareCheckbox = screen.getByRole("checkbox", { name: "Current app state" });
const shareOptions = shareCheckbox.closest(".overflow-y-auto");

expect(shareOptions).toHaveClass("pl-1", "py-1", "pr-2");
});
});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test just repeats the implementation. I would remove it.

@czxtm

Copy link
Copy Markdown
Member

/dm address comments

Address review feedback from arximboldi:
- Inline FEEDBACK_DIALOG_BODY_CLASS and FEEDBACK_SHARE_OPTIONS_CLASS
  directly at their JSX use sites; the constants added no reuse value
- Remove feedback-dialog.test.tsx which only asserted the presence of
  the class strings themselves, mirroring the implementation without
  testing meaningful behaviour
@darkmatter

darkmatter Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Addressed Juanpe Bolívar (@arximboldi)'s review (commit 7538045):

  • Inlined class strings — removed FEEDBACK_DIALOG_BODY_CLASS and FEEDBACK_SHARE_OPTIONS_CLASS module-level constants; the values are now written directly in the JSX where they're used (each appears exactly once, so the extraction added no value).
  • Removed feedback-dialog.test.tsx — the test only asserted the presence of those specific class strings, mirroring the implementation rather than testing any real behaviour.

Changed files: apps/native/src/components/widget/feedback/feedback-dialog.tsx, apps/native/src/components/widget/feedback/feedback-dialog.tsx (deleted test file).

The Storybook snapshot failures (Settings/AutoConfigField and Settings/AutoTuningSection) pre-date this PR's changes and are unrelated to the feedback dialog; they will need a separate snapshot-update workflow run.

@czxtm
cooper (czxtm) merged commit c8ad021 into develop Jul 4, 2026
3 of 8 checks passed
@czxtm
cooper (czxtm) deleted the fix/report-issue-focus-ring branch July 4, 2026 19:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants